<template>
    <div>
    <TypeNav/>
    <ListContainer/>
    <Recommend/>
    <Rank/>
    <Like/>
    <Floor v-for="(floor,index) in floorList" :key=floor.id :floor="floor" :index="index" />
  
    <Brand/>  
    </div>
 
</template>

<script>
import ListContainer from "@/pages/Home/ListContainer"
import Like from "@/pages/Home/Like"
import Brand from "@/pages/Home/Brand"
import Rank from "@/pages/Home/Rank"
import Floor from "@/pages/Home/Floor"
import Recommend from "@/pages/Home/Recommend"
// import TypeNav from "@/pages/Home/TypeNav"
import { mapActions,mapState } from "vuex"
    export default {
        name:"Home",

        components:{
            ListContainer,
            Like,
            Brand,
            Rank,
            Floor,
            Recommend,
            // TypeNav

        },
        computed:{
            ...mapState({floorList:state => state.home.floor})
        },
        methods:{
            ...mapActions("home",["GetFloorList"])
        },
        mounted(){
            this.GetFloorList();
        }
    }
</script>

<style lang="less" scoped>
   h1{
    width: 300px;
    background-color: pink;
   }
</style>